<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="../../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/gongtong.css">
    <title>四川农业大学动物科技学院</title>
</head>
<body>
    <!-- 顶部 -->
    <div id="green"></div>
    <div class="header container">
        <div class="top">
            <img src="../../image/logo(1).png" alt="四川农业大学省级水产类实验教学中心">
            <div class="text-center">&nbsp;四川省水产类实验教学中心</div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="container nav">
        <div class="row text-center list">
            <div class="col-xs-12 col-sm-4 col-md-2">
                <span><a href="../index.html">
                        <div class="glyphicon glyphicon-home">&nbsp;</div>首页
                    </a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="gaikuang.html">概况</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="shizi.html">师资队伍</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="jiaoxue.html">教学管理</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="kexue.html">科学研究</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="rencai.html">人才培养</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="shehui.html">社会服务</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="tiaojian.html">条件支撑</a></span>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-1">
                <span><a href="yunxing.html">运行管理</a></span>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="container">
        <div class="row">
            <div class="col-md-2 clo-sm-12 left">
                <h4><span class="glyphicon glyphicon-search tu"></span>&nbsp;&nbsp;科学研究</h4>
                <ul>
                    <li><span class="active tab" data-id="0">研究方向</span></li>
                    <li><span class="tab" data-id="1">承担项目</span></li>
                    <li><span class="tab" data-id="2">科研结果</span></li>
                </ul>
            </div>
            <div class="col-md-9 clo-sm-12 right">
                <div class="weizhi on" >
                    <div class="leirongsang">
                        你现在的位置：
                        <a href="../index.html">首页</a>&nbsp;>&nbsp;
                        <a href="kexue.html">科学研究</a>&nbsp;>&nbsp;
                        研究方向
                    </div>
                        <div class="leirong">
                            <h1>
                                主要研究方向
                            </h1>
                                <p>xxx</p>
                        </div>
                </div>
                <div class="weizhi">
                    <div class="leirongsang">
                        你现在的位置：
                        <a href="../index.html">首页</a>&nbsp;>&nbsp;
                        <a href="kexue.html">科学研究</a>&nbsp;>&nbsp;
                        承担项目
                    </div>
                    <div class="leirong">
                        <ul>
                            <li><span>2011-11-11</span>XXX</li>
                            <li><span>2011-11-11</span>XXX</li>
                            <li><span>2011-11-11</span>XXX</li>
                        </ul>
                        <div class="dibu">                           
                            共6条新闻，分1页，当前第<font color="red">1</font>页
                            <a href="#">最前面</a>
                            <a href="#">上一页</a>
                            <a href="#">下一页</a>
                            <a href="#">最前面</a>
                        </div>
                    </div>
                </div>
                <div class="weizhi">
                    <div class="leirongsang">
                        你现在的位置：
                        <a href="../index.html">首页</a>&nbsp;>&nbsp;
                        <a href="kexue.html">科学研究</a>&nbsp;>&nbsp;
                        科研结果
                    </div>
                    <div class="leirong">
                        <ul>
                            <li><span>2011-11-11</span>XXX</li>
                            <li><span>2011-11-11</span>XXX</li>
                            <li><span>2011-11-11</span>XXX</li>
                        </ul>
                        <div class="dibu">                           
                            共6条新闻，分1页，当前第<font color="red">1</font>页
                            <a href="#">最前面</a>
                            <a href="#">上一页</a>
                            <a href="#">下一页</a>
                            <a href="#">最前面</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="down">
        <div class="container">
            <div >

            </div>
            <div>

            </div>
        </div>
    </div>
</body>
<script>
    // tab是选项卡的按钮
    var tab = document.querySelectorAll('.tab')
    // xuanxiang是选项卡的leirong
    var xuanxiang = document.querySelectorAll('.weizhi')
    // console.log(tab.length);
    for(var h = 0 ; h < tab.length ; h++ ){
    tab[h].onclick=function(){
        for(var i =0 ; i < tab.length ; i++){
            tab[i].className ='tab' 
        }
        this.className='active tab' 
        var index=this.getAttribute('data-id')
        // console.log(index);
         for(var t = 0 ; t < xuanxiang.length ; t++){
             xuanxiang[t].classList.remove('on')
         }
        xuanxiang[index].classList.add('on')
        var num =index
    }
}

</script>
</html>